@use 'sass:map';
@use 'sass:color';
@use '@angular/material' as mat;

@mixin color($config-or-theme) {
  $config: mat.get-color-config($config-or-theme);
  $background: map.get($config, background);
  $foreground: map.get($config, foreground);
  $primary: map.get($config, primary);
  $accent: map.get($config, accent);

  .pac-property-dimension {
    display: block;
    
    .mat-tree-node {
      padding-right: 1rem;
      position: relative;

      &:hover,
      &:focus {
        background-color: color.change(mat.get-color-from-palette($primary), $alpha: 0.1);
        color: mat.get-color-from-palette($primary);

        .ngm-display-behaviour__option-value {
          opacity: 1;
        }
      }

      .mat-icon-rtl-mirror {
        color: color.change(mat.get-color-from-palette($primary), $alpha: 0.3);
      }
    }

    .ngm-tree_selection.cdk-tree {
      .cdk-tree-node.selected {
        background-color: color.change(mat.get-color-from-palette($primary), $alpha: 0.2);
        color: mat.get-color-from-palette($primary);
      }
    }
  }
}

@mixin density($config-or-theme) {
  .pac-property-dimension.ngm-density__compact {
    .mat-tree-node {
      min-height: 30px;
      font-size: 12px;
      line-height: 12px;
    }
  }
}
